<template>
  <el-card>
    <div class="header-bar">
      <span class="title">设备保养维护</span>
      <el-select v-model="search.type" placeholder="设备类型" size="small" style="width:130px;margin-right:10px;" clearable>
        <el-option label="全部" value="" />
        <el-option v-for="type in deviceTypeList" :key="type" :label="type" :value="type" />
      </el-select>
      <el-input v-model="search.keyword" placeholder="设备名称/编号" size="small" style="width:180px;margin-right:10px;"
        clearable />
      <el-button type="primary" size="small" @click="onAddProject">新增保养项目</el-button>
      <el-button type="success" size="small" @click="onBatchMaintain" :disabled="!selected.length">批量登记</el-button>
    </div>

    <el-table :data="filteredList" border style="width:100%;margin-top:16px;" height="500px" :row-key="row => row.id"
      @selection-change="onSelectionChange" ref="tableRef">
      <el-table-column type="selection" width="45" />
      <el-table-column prop="id" label="设备编号" width="120" />
      <el-table-column prop="name" label="设备名称" min-width="110" />
      <el-table-column prop="type" label="设备类型" width="110" />
      <el-table-column prop="project" label="保养项目" min-width="100" />
      <el-table-column prop="cycle" label="周期" width="90" />
      <el-table-column prop="planDate" label="计划日期" width="120" />
      <el-table-column prop="status" label="状态" width="90" />
      <el-table-column prop="doneDate" label="保养日期" width="120" />
      <el-table-column prop="remark" label="备注" min-width="100" />
      <el-table-column label="操作" width="230">
        <template #default="{ row }">
          <el-button size="small" @click="onMaintain(row)">登记</el-button>
          <el-button size="small" @click="onEditProject(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="onDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑保养项目弹窗 -->
    <el-dialog v-model="projectVisible" :title="projectForm.id ? '编辑保养项目' : '新增保养项目'">
      <el-form :model="projectForm" label-width="90px">
        <el-form-item label="设备编号"><el-input v-model="projectForm.id" /></el-form-item>
        <el-form-item label="设备名称"><el-input v-model="projectForm.name" /></el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="projectForm.type">
            <el-option v-for="type in deviceTypeList" :key="type" :label="type" :value="type" />
          </el-select>
        </el-form-item>
        <el-form-item label="保养项目"><el-input v-model="projectForm.project" /></el-form-item>
        <el-form-item label="周期">
          <el-select v-model="projectForm.cycle">
            <el-option label="月" value="月" />
            <el-option label="季" value="季" />
            <el-option label="年" value="年" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划日期">
          <el-date-picker v-model="projectForm.planDate" type="date" placeholder="选择日期" style="width:100%;" />
        </el-form-item>
        <el-form-item label="备注"><el-input v-model="projectForm.remark" type="textarea" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="projectVisible = false">取消</el-button>
        <el-button type="primary" @click="onSaveProject">保存</el-button>
      </template>
    </el-dialog>

    <!-- 保养登记弹窗 -->
    <el-dialog v-model="maintainVisible" title="保养登记">
      <el-form :model="maintainForm" label-width="90px">
        <el-form-item label="状态">
          <el-select v-model="maintainForm.status">
            <el-option label="已完成" value="已完成" />
            <el-option label="待执行" value="待执行" />
            <el-option label="逾期" value="逾期" />
          </el-select>
        </el-form-item>
        <el-form-item label="保养日期">
          <el-date-picker v-model="maintainForm.doneDate" type="date" style="width:100%;" />
        </el-form-item>
        <el-form-item label="备注"><el-input v-model="maintainForm.remark" type="textarea" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="maintainVisible = false">取消</el-button>
        <el-button type="primary" @click="onSaveMaintain">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

const deviceTypeList = ['输液泵', '心电监护仪', 'CT机', '麻醉机', '超声仪']

const tableRef = ref(null)
const search = reactive({ type: '', keyword: '' })
const selected = ref([])

const list = ref([
  { id: 'EQ-202406-0001', name: '注射泵A', type: '输液泵', project: '泵管检查', cycle: '月', planDate: '2024-06-20', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0002', name: '心电监护仪B', type: '心电监护仪', project: '电极片更换', cycle: '月', planDate: '2024-06-21', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0003', name: 'CT机C', type: 'CT机', project: '探测器校准', cycle: '季', planDate: '2024-07-01', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0004', name: '麻醉机D', type: '麻醉机', project: '气路检查', cycle: '季', planDate: '2024-06-30', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0005', name: '便携式B超', type: '超声仪', project: '探头消毒', cycle: '月', planDate: '2024-06-28', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0006', name: '输液泵B', type: '输液泵', project: '电源线检查', cycle: '年', planDate: '2024-12-10', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0007', name: '血透机A', type: '血液透析机', project: '泵阀维护', cycle: '月', planDate: '2024-07-02', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0008', name: '移动DR', type: 'DR', project: '成像板清洁', cycle: '季', planDate: '2024-08-10', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0009', name: '彩超仪C', type: '超声仪', project: '主机除尘', cycle: '季', planDate: '2024-09-05', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0010', name: '呼吸机', type: '呼吸机', project: '滤网更换', cycle: '月', planDate: '2024-07-18', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0011', name: '化学发光分析仪', type: '分析仪', project: '仪器校准', cycle: '年', planDate: '2024-12-05', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0012', name: '心电监护仪C', type: '心电监护仪', project: '软件升级', cycle: '年', planDate: '2025-01-15', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0013', name: '输液泵C', type: '输液泵', project: '注射模块检查', cycle: '月', planDate: '2024-07-10', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0014', name: 'CT机D', type: 'CT机', project: '冷却系统维护', cycle: '年', planDate: '2024-12-25', status: '待执行', doneDate: '', remark: '' },
  { id: 'EQ-202406-0015', name: '输液泵D', type: '输液泵', project: '外壳清洁', cycle: '季', planDate: '2024-08-20', status: '待执行', doneDate: '', remark: '' }
])


const filteredList = computed(() => {
  return list.value.filter(row => {
    const matchType = !search.type || row.type === search.type
    const matchKey = !search.keyword ||
      row.name.includes(search.keyword) ||
      row.id.includes(search.keyword)
    return matchType && matchKey
  })
})

function onSelectionChange(arr) {
  selected.value = arr
}

const projectVisible = ref(false)
const projectForm = reactive({
  id: '', name: '', type: '', project: '', cycle: '月', planDate: '', remark: ''
})

function onAddProject() {
  Object.assign(projectForm, { id: '', name: '', type: '', project: '', cycle: '月', planDate: '', remark: '' })
  projectVisible.value = true
}
function onEditProject(row) {
  Object.assign(projectForm, row)
  projectVisible.value = true
}
function onSaveProject() {
  if (!projectForm.id || !projectForm.name || !projectForm.project || !projectForm.planDate) {
    ElMessage.warning('设备编号、名称、保养项目、计划日期必填')
    return
  }
  projectForm.planDate = dayjs(projectForm.planDate).format('YYYY-MM-DD')
  const idx = list.value.findIndex(item => item.id === projectForm.id && item.project === projectForm.project)
  if (idx !== -1) {
    list.value[idx] = { ...projectForm, status: list.value[idx].status, doneDate: list.value[idx].doneDate }
    ElMessage.success('编辑成功')
  } else {
    list.value.push({ ...projectForm, status: '待执行', doneDate: '' })
    ElMessage.success('新增成功')
  }
  projectVisible.value = false
}
function onDelete(row) {
  list.value = list.value.filter(item => !(item.id === row.id && item.project === row.project))
  ElMessage.success('删除成功')
}

// 保养登记
const maintainVisible = ref(false)
const maintainForm = reactive({
  id: '', project: '', status: '已完成', doneDate: dayjs().format('YYYY-MM-DD'), remark: ''
})
let maintainIdx = -1
function onMaintain(row) {
  Object.assign(maintainForm, { id: row.id, project: row.project, status: '已完成', doneDate: dayjs().format('YYYY-MM-DD'), remark: row.remark })
  maintainIdx = list.value.findIndex(item => item.id === row.id && item.project === row.project)
  maintainVisible.value = true
}
function onSaveMaintain() {
  if (maintainIdx === -1) return
  list.value[maintainIdx].status = maintainForm.status
  list.value[maintainIdx].doneDate = dayjs(maintainForm.doneDate).format('YYYY-MM-DD')
  list.value[maintainIdx].remark = maintainForm.remark
  maintainVisible.value = false
  ElMessage.success('保养登记成功')
}

// 批量登记（直接将所选项目全部设为已完成，保养日期为当天）
function onBatchMaintain() {
  const today = dayjs().format('YYYY-MM-DD')
  selected.value.forEach(row => {
    const idx = list.value.findIndex(item => item.id === row.id && item.project === row.project)
    if (idx !== -1) {
      list.value[idx].status = '已完成'
      list.value[idx].doneDate = today
    }
  })
  // 清空选择
  tableRef.value.clearSelection()
  selected.value = []
  ElMessage.success('批量登记完成')
}
</script>

<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
}
</style>
